<template>
<div>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item><a>爱心服务</a></el-breadcrumb-item>
    <el-breadcrumb-item>服务列表</el-breadcrumb-item>
  </el-breadcrumb>
  <el-divider></el-divider>

<div>
  <el-row>
    <el-button style="float: left" type="primary" round
               @click="openEditDialog">新增服务</el-button>
  </el-row>
</div>
  <div style="padding-bottom: 30px">
    <el-input placeholder="请输入房间号：" v-model="editForm.name" prefix-icon="el-icon-search"
              style="width: 300px; padding-right: 10px;float: left"></el-input>
    <el-button @click="searchByRoomName(page,pageSize)" type="primary" icon="el-icon-search" style="float:left;">搜索
    </el-button>
    <el-button @click="goBack()" type="primary" style="float:left;">返回</el-button>
  </div>

  <el-table :data="orderArr">
    <el-table-column type="index" label="记录" width="100"></el-table-column>
    <el-table-column prop="name" label="房间号" width="200"></el-table-column>
    <el-table-column prop="content" label="内容"></el-table-column>
    <el-table-column
        label="操作"
        width="250">
      <template slot-scope="scope">
        <el-button type="danger" icon="el-icon-delete" circle size="mini"
                   @click="openDeleteConfirm(scope.row)"></el-button>
      </template>

    </el-table-column>
  </el-table>



  <div class="block">
    <!-- 以下是弹出的新增服务的对话框 -->
    <el-dialog title="新增服务" :visible.sync="dialogFormVisible">
      <el-form :model="editForm">
        <el-form-item label="房间号" :label-width="formLabelWidth">
          <el-input v-model="editForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="内容" :label-width="formLabelWidth">
          <el-input v-model="editForm.content" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEditForm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
  <div class="block">
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>




</div>
</template>

<script>
export default {
  name: "ServiceList",
  data() {
    return {
      orderArr:[], //存放接收后端的数据
      page: 1, // 当前页 默认设值1
      pageSize: 10, // 每页显示条目 默认设置5
      total: 50 ,// 条目总数
      productArr: [],
      dialogFormVisible: false,
      editForm: {
        name: '',
        content: '',

      },
      formLabelWidth: '120px'
    }

  },
  methods:{
    handleDelete(editForm){
      let url = 'http://localhost:9085/service/' + editForm.id + '/delete';
      console.log('url = ' + url);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$message({
            message: '删除服务成功！',
            type: 'success'
          });
          this.loadPage(this.page, this.pageSize);
        } else if (responseBody.state == 40400) {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {// eslint-disable-line no-unused-vars
              this.loadPage(this.page, this.pageSize);
            }
          });
        } else {
          this.$message.error(responseBody.message);
        }
      });
    },
    openDeleteConfirm(editForm){ this.$confirm('是否删除名为【' + editForm.name + '】的服务？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      this.handleDelete(editForm);
    }).catch(() => {

    });},
    goBack(){
      this.handleCurrentChange(1);
    },
    searchByRoomName(page, pageSize){
      let url = "http://localhost:9085/service/selectByName"+"?name="+this.editForm.name;
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url,{
            params:{
              page,
              pageSize
            }
          }).then(response => {
        let responseBody = response.data;
        this.orderArr = responseBody.data.list;
        this.total = responseBody.data.total;
      });
    },
    submitEditForm() {
      let url = 'http://localhost:9085/service/new';
      console.log('url = ' + url);
      let formData = this.qs.stringify(this.editForm);
      console.log('formData = ' + formData);

      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url, formData).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$message({
            message: '添加成功！',
            type: 'success'
          });
          this.dialogFormVisible = false;
          this.loadPage();
        } else if (responseBody.state == 40400) {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {// eslint-disable-line no-unused-vars
              this.dialogFormVisible = false;
              this.loadCustomerInput();
            }
          });
        } else {
          this.$message.error(responseBody.message);
        }
      });
    },
    openEditDialog(){
      this.dialogFormVisible=true;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.loadPage(this.page,this.pageSize);
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page = val;
      this.loadPage(this.page,this.pageSize);
      console.log(`当前页: ${val}`);
    },
    loadPage(page,pageSize) {
      let url = "http://localhost:9085/service/";
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url,{
            params:{
              page,
              pageSize
            }
          }).then(resp => {
        let responseBody = resp.data;
        this.orderArr = responseBody.data.list;
        this.total = responseBody.data.total;
        console.log(responseBody);
      });
    },
    },
    mounted() {
      this.loadPage();
    }



}
</script>

<style scoped>

</style>
